import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import chartTheme from '@/data/chart.theme.json';

import styles from './index.module.css'

const ElevatorRescue = () => {
    const chartRef = useRef(null);

    useEffect(() => {
        if (chartRef.current) {
            const myChart = echarts.init(chartRef.current, chartTheme, { renderer: 'svg' });

            const option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [650, 180, 900, 700, 450, 600, 700, 550, 380, 720],
                        type: 'line',
                        areaStyle: {
                            color: '#0a6a57',
                            opacity: 0.3
                        }
                    },
                    {
                        data: [400, 450, 380, 510, 600, 350, 450, 550, 580, 480],
                        type: 'line',
                        areaStyle: {
                            color: '#033230',
                            opacity: 0.3
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    }, [])

    return (
        <div className={styles.elevatorRescue}>
            <div className={styles.smartRescueCard}>
                <div className={styles.alertNum}>
                    报警救援数<span>5623</span>起
                </div>
                <div className={styles.alertHandlingNum}>
                    处理中救援<span>4879</span>起
                </div>
                <div className={styles.alertWaitNum}>
                    待处理救援<span>744</span>起
                </div>
                <div className={styles.monthHandling}>
                    <div className={styles.smartRescueCardLabel}>当月处置数</div>
                    <div className={styles.smartRescueCardNumber}>208</div>
                </div>
                <div className={styles.yearTotal}>
                    <div className={styles.smartRescueCardLabel}>年累计</div>
                    <div className={styles.smartRescueCardNumber}>412</div>
                </div>
                <div className={styles.monthClear}>
                    <div className={styles.smartRescueCardLabel}>当月消除故障</div>
                    <div className={styles.smartRescueCardNumber}>87</div>
                </div>
                <div className={styles.clearYearTotal}>
                    <div className={styles.smartRescueCardLabel}>年累计</div>
                    <div className={styles.smartRescueCardNumber}>106</div>
                </div>
            </div>
            <div className={styles.rescueSpotCard}>
                <div className={styles.spotsTotal}>
                    <div className={styles.rescueSpotCardCount}>
                        1243<span>个</span>
                    </div>
                    <div className={styles.rescueSpotCardLabel}>站点总数</div>
                </div>
                <div className={styles.serviceTotal}>
                    <div className={styles.rescueSpotCardCount}>
                        5258<span>个</span>
                    </div>
                    <div className={styles.rescueSpotCardLabel}>服务人员总数</div>
                </div>
                <div className={styles.serviceWorking}>
                    <div className={styles.rescueSpotCardCount}>
                        1052<span>个</span>
                    </div>
                    <div className={styles.rescueSpotCardLabel}>服务中人员</div>
                </div>
                <div className={styles.restService}>
                    <div className={styles.rescueSpotCardCount}>
                        70<span>%</span>
                    </div>
                    <div className={styles.rescueSpotCardLabel}>剩余服务空间率</div>
                </div>
            </div>
            <div className={styles.trappedPersonAnalysis}>
                <div ref={chartRef} className={styles.trappedPersonAnalysisChart}></div>
            </div>
        </div>
    )
}

export default ElevatorRescue;